<template>
	<view class="mark"></view>
	<view class="header">
		<view class="header_logo">
			<image class="header_logo_img" src="/static/logo.png" mode=""></image>
		</view>
		<view class="header_name">
			游云.旅游
		</view>
		<view class="header_welcome">欢迎使用游云.旅游业助手工具</view>
	</view>

	<view class="form">
		<view class="form_item">
			<view class="form_item_icon">
				<uni-icons type="auth" size="23" color="rgba(255,255,255,1)"></uni-icons>
			</view>
			<view class="form_item_block">
				<input type="text" v-model="formData.username" placeholder-style="color:rgba(255,255,255,1)"
					class="form_item_input" placeholder="请输入用户名">
			</view>
		</view>
		<view class="form_item">
			<view class="form_item_icon">
				<uni-icons type="locked" size="23" color="rgba(255,255,255,1)"></uni-icons>
			</view>
			<view class="form_item_block">
				<input type="text" v-model="formData.password" placeholder-style="color:rgba(255,255,255,1)"
					class="form_item_input" placeholder="登录密码(6-16位密码)">
			</view>
		</view>
		<view class="form_item" v-if="status">
			<view class="form_item_icon">
				<uni-icons type="locked-filled" size="22" color="rgba(255,255,255,1)"></uni-icons>
			</view>
			<view class="form_item_block">
				<input type="text" v-model="formData.confirm" placeholder-style="color:rgba(255,255,255,1)"
					class="form_item_input" placeholder="确认密码">
			</view>
		</view>
		<view class="regions" @click="tags">
			{{status ? "有账号，去登录" : "还没有账号？点击注册"}}
		</view>
	</view>

	<button class="btn" @click="submit">立即登录</button>

</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		saveUserLogin
	} from "@/common/api.js"
	import cache from "@/util/cache.js"
	import user from "@/common/user";

	let status = ref(0)
	let formData = ref({
		username: "",
		password: "",
		comfirm: "",
		category: "",
		type: "h5"
	})



	const submit = () => {
		if (!check()) return false;
		formData.value.category = status.value ? 'register' : 'login';

		saveUserLogin(formData.value).then(res => {
			user.setUser(res.data)
			uni.$rui.toast('登录成功', () => {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}, 1000, 'success')
		})
	}
	

	const check = () => {
		if (!formData.value.username && !formData.value.password) {
			uni.showToast({
				title: "用户名或密码不能为空",
				icon: "none"
			})
			return false;
		}

		if (formData.value.username.length > 20 || formData.value.username.length < 4) {
			uni.showToast({
				title: "用户名长度4~20位",
				icon: "none"
			})
			return false;
		}

		if (formData.value.password.length > 16 || formData.value.password.length < 6) {
			uni.showToast({
				title: "密码长度6~16位",
				icon: "none"
			})
			return false;
		}

		if (status.value && formData.value.confirm !== formData.value.password) {
			uni.showToast({
				title: "两次密码不一致",
				icon: "none"
			})
			return false;
		}

		return true;
	}

	const tags = () => {
		status.value = !status.value
	}
</script>

<style lang="scss" scoped>
	.btn {
		margin: 50rpx 100rpx;
		font-size: 32rpx;
	}

	.form {
		margin: 50rpx 100rpx;
		position: relative;
		z-index: 9;

		.regions {
			text-align: right;
			color: #fff;
		}

		&_item {
			position: relative;
			margin-bottom: 40rpx;

			&_icon {
				position: absolute;
				top: 16rpx;
				left: 0;
			}

			&_input {
				border-bottom: 1rpx solid rgba(255, 255, 255, .5);
				padding: 20rpx 70rpx 20rpx;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}

	.header {
		text-align: center;
		padding: 50rpx 0 100rpx;
		position: relative;
		z-index: 9;

		&_name {
			font-size: 40rpx;
			font-family: Times New Roman, Times, serif;
			color: #fff;
			margin-bottom: 10rpx;
			font-weight: bold;
		}

		&_logo {
			&_img {
				height: 150rpx;
				width: 150rpx;
			}
		}

		&_welcome {
			color: rgba(255, 255, 255, .5);
			font-size: 24rpx;
		}
	}

	.mark {
		background-image: linear-gradient(to top, #1dc9ff, #40a3ff, #3d7eff);
		position: fixed;
		width: 100%;
		height: 100%;
	}
</style>